import React from 'react'
import PropTypes from 'prop-types'
import './index.sass'
export default function HouseItem({ src, title, desc, tags, price, onClick, style ,code}) {
  HouseItem.propTypes = {
    src: PropTypes.string,
    title: PropTypes.string,
    desc: PropTypes.string,
    tags: PropTypes.array.isRequired,
    price: PropTypes.number,
    onClick: PropTypes.func
  }
  return (
    <div className="house-item" onClick={onClick} style={style} key={code}>
      <div className="imgWrap">
        <img className="img" src={src} alt="" />
      </div>
      <div className="content">
        <h3 className="title">{title}</h3>
        <div className="desc">{desc}</div>
        <div>
          {tags.map((tag, index) => {
            const tagClass = 'tag' + (index + 1)
            return (
              <span
                className={`tag ${tagClass}`}
                key="tag"
              >
                {tag}
              </span>
            )
          })}
        </div>
        <div className="price">
          <span className="priceNum">{price}</span> 元/月
        </div>
      </div>
    </div>
  )
}
